<template>
    <!-- 电影展示组件 start -->
    <div class="film-item">
        <div
            class="film-img"
            style="background-image: url(./imgs/film.jpg)"
        ></div>
        <div class="film-title">蚁人2：黄蜂女现身</div>
        <div class="film-source">
            <span class="star-img open"></span>
            <span class="star-img open"></span>
            <span class="star-img open"></span>
            <span class="star-img close"></span>
            <span class="star-img close"></span>
            <span class="star-source">7.9</span>
        </div>
    </div>
    <!-- 电影展示组件 end -->
</template>

<style lang="less" scoped>
.film-item {
    width: 2.35rem;
    height: 4.55rem;
    display: inline-block;
    margin-left: 0.1rem;
    vertical-align: top;
    > .film-img {
        height: 3.6rem;
        background-color: @gray-light;
        background-repeat: no-repeat;
        background-size: cover;
    }
    > .film-title {
        font-size: 0.26rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 0.1rem;
    }
}
</style>